<!-- 电子、捕鱼、棋牌 游戏厂家列表 -->
<template>
    <div class="game-platform">
        <div class="platform-title">
            <img :key="props.tabInfo.icon_h5" :src="`${joinURL(settings.backend_upload, props.tabInfo.icon_h5)}`"
                alt="icon" class="section_icon" />
            <span>{{ unserialize(props.tabInfo.name, false) }}</span>
        </div>

        <div class="platform-list">
            <div class="platform-item" :class="['item-' + keyMap[props.tabInfo.id]]"
                v-for="(item) in sortByWeight(props.tabInfo.three_platform)" :key="item.id" @click="onPlayGame(item)">
                <div class="con" :class="[props.tabInfo.id == 6 ? 'con1' : '']"
                    :style="{ backgroundImage: `url(${joinURL(settings.backend_upload, props.tabInfo.id == 6 ? item.picture_category_list_background : item.picture_h5_second_background)})` }">
                    <div class="left">
                        <img :src="`${joinURL(settings.backend_upload, item.logo_h5)}`" :key="item.logo_h5"
                            alt="item_image" class="item_image" />
                        <p class="item_label">{{ unserialize(item.name, false) }}</p>
                    </div>
                    <img src="@/assets/img-default.svg" class="right" v-thumb="`${joinURL(settings.backend_upload, item[keyMap[props.tabInfo.id]])}`"
                        :key="item.picture_h5_second" alt="item_image" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import pinia from '@/store';
import { joinURL } from '@/utils/publicMethods'
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';


const keyMap: any = {
    1: "electronics",
    3: "video",
    2: "fishing",
    4: "sports",
    5: "chess",
    6: "lottery"
}
const weightKeyMap: any = {
    1: "electronics_weight",
    3: "video_weight",
    2: "fishing_weight",
    4: "sports_weight",
    5: "chess_weight",
    6: "lottery_weight"
}
const sortByWeight = (list: any) => { // 倒序
    if (!list) return []
    const key: any = weightKeyMap[props.tabInfo.id]
    return list.sort((a: any, b: any) => b[key] - a[key])
}

const { settings } = storeToRefs(Page(pinia));
const props: any = defineProps({
    tabInfo: {
        type: Object,
        default: () => ({}), // 设置默认值
    },
});


</script>

<style lang="scss" scoped>
.game-platform {
    padding: 0 14px;

    .platform-title {
        margin-bottom: 9px;
        color: #FCFFFA;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .section_icon {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }
    }

    .platform-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .platform-item {
            width: 168px;
            height: 94px;
            margin-bottom: 8px;
            overflow: hidden;
            border-radius: 8px;
            position: relative;
            background: #1B1028;

            .con {
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 9;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 12px;
                background-size: 100% 100%;

            }

            .con1 {
                padding: 0 25px 0 50px;
            }

            .right {
                width: auto;
                height: 92px;
            }

            .left {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 60px;

                .item_image {
                    height: 20px;
                    width: auto;
                    margin-bottom: 6px;
                }

                .item_label {
                    text-align: center;
                    color: #FFF;
                    text-align: center;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 14px;
                    white-space: nowrap;
                }

            }
        }

        .item-lottery {
            width: 347px;
        }

    }
}
</style>